import React from 'react';
import { App, Button, Checkbox, Form, Input, message as antdMessage } from 'antd';
import axios from 'axios'
import { useNavigate } from 'react-router-dom';

// hooks 
// 1. 必须在函数组件顶层使用
// 2. 不可以出现在条件分支， 循环等里面

export default function Index() {
  const navigate = useNavigate()
  const onFinish = (values) => {
  
    // 请求接口
    axios.post('/api/login', values).then(resp => {

      console.log(resp.data)
      // 获取后端返回的数据
      const { code, message, data } = resp.data;
      // 判断
      if (code === 200) {
        localStorage.setItem('token', data.token)
        localStorage.setItem('role', data.role)
        // 成功
        antdMessage.success(message)
        // 进入首页
        navigate('/')
      } else {
        // 失败
        antdMessage.error(message)
      }
    })
  };
  return (
    <div>
      <Form
        name="basic"
        labelCol={{
          span: 8,
        }}
        wrapperCol={{
          span: 16,
        }}
        style={{
          maxWidth: 600,
        }}
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input.Password />
        </Form.Item>


        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            登陆
          </Button>
        </Form.Item>
      </Form>
    </div>
  )
}



// 1. 什么是token ？ 
// 头部Header.载体Payload.签名Signature
// qwiduqwpkeqwerwoerwq1231231e1.1232qwdqwe1231231.1231wd12w1e2
// 2. 为什么要是用token
// 用户身份识别
// 3. 如何用？ 